<template>
  <el-container>
    <el-header>
      <Header></Header>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <Aside></Aside>
      </el-aside>
      <el-main>
        <h3 style="text-align: center">删除文章</h3>

        <div style="text-align: center">
          <el-button type="danger" @click="handleDelete()">删除</el-button>
        </div>
      </el-main>
    </el-container>
    <el-footer>
      <Footer></Footer>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      itemid: 0,
    };
  },
  async mounted() {
    this.itemid = parseInt(this.$route.query.itemid);
  },
  methods: {
    handleDelete() {
      this.$confirm("确定要删除吗？", "系统提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          this.$axios
            .post("/api/article/del", {
              itemid: this.itemid,
            })
            .then((data) => {
              this.loading = false;

              if (parseInt(data.code) > 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                setTimeout(() => {
                  this.$router.push({
                    path: "/article/lst",
                  });
                }, 1000);
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!",
                });
              }
            })
            .catch((error) => {
              this.loading = false;
              this.$message.error(error.toString());
            });
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-main {
  color: #333;
}
</style>
